"use client"

import type React from "react"

import { useState } from "react"
import { Hand, Minus, Plus, Paintbrush, Eraser, Undo, Redo, FlipHorizontal, Download } from "lucide-react"

type ToolType = "hand" | "paint" | "erase" | null

interface ZoomControlPanelProps {
  initialZoom?: number
  minZoom?: number
  maxZoom?: number
  step?: number
  initialBrushSize?: number
  onZoomChange?: (zoom: number) => void
  onToolChange?: (tool: ToolType) => void
  onBrushSizeChange?: (size: number) => void
  onUndo?: () => void
  onRedo?: () => void
  onFlip?: () => void
  onDownload?: () => void
  className?: string
}

export function ZoomControlPanel({
  initialZoom = 30,
  minZoom = 10,
  maxZoom = 200,
  step = 10,
  initialBrushSize = 10,
  onZoomChange,
  onToolChange,
  onBrushSizeChange,
  onUndo,
  onRedo,
  onFlip,
  onDownload,
  className = "",
}: ZoomControlPanelProps) {
  const [zoom, setZoom] = useState(initialZoom)
  const [activeTool, setActiveTool] = useState<ToolType>(null)
  const [brushSize, setBrushSize] = useState(initialBrushSize)

  const handleZoomChange = (newZoom: number) => {
    // Ensure zoom stays within bounds
    const clampedZoom = Math.max(minZoom, Math.min(maxZoom, newZoom))
    setZoom(clampedZoom)
    onZoomChange?.(clampedZoom)
  }

  const decreaseZoom = () => {
    handleZoomChange(zoom - step)
  }

  const increaseZoom = () => {
    handleZoomChange(zoom + step)
  }

  const setTool = (tool: ToolType) => {
    setActiveTool(tool === activeTool ? null : tool)
    onToolChange?.(tool === activeTool ? null : tool)
  }

  const handleBrushSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newSize = Number.parseInt(e.target.value)
    setBrushSize(newSize)
    onBrushSizeChange?.(newSize)
  }

  return (
    <div className="flex flex-col gap-2">
      {/* Tool buttons */}
      <div className={`flex items-center gap-2 bg-gray-500 rounded-md p-2 text-white ${className}`}>
        <button
          className={`flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none ${activeTool === "hand" ? "bg-gray-400" : ""}`}
          onClick={() => setTool("hand")}
          aria-label="Hand tool"
        >
          <Hand className="h-5 w-5" />
        </button>

        <button
          className={`flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none ${activeTool === "paint" ? "bg-gray-400" : ""}`}
          onClick={() => setTool("paint")}
          aria-label="Paint tool"
        >
          <Paintbrush className="h-5 w-5" />
        </button>

        <button
          className={`flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none ${activeTool === "erase" ? "bg-gray-400" : ""}`}
          onClick={() => setTool("erase")}
          aria-label="Erase tool"
        >
          <Eraser className="h-5 w-5" />
        </button>

        <div className="h-4 w-px bg-gray-400 mx-1"></div>

        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={onUndo}
          aria-label="Undo"
        >
          <Undo className="h-5 w-5" />
        </button>

        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={onRedo}
          aria-label="Redo"
        >
          <Redo className="h-5 w-5" />
        </button>

        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={onFlip}
          aria-label="Flip horizontally"
        >
          <FlipHorizontal className="h-5 w-5" />
        </button>

        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={onDownload}
          aria-label="Download image"
        >
          <Download className="h-5 w-5" />
        </button>
      </div>

      {/* Brush size control - only visible when paint tool is active */}
      {activeTool === "paint" && (
        <div className="flex items-center gap-2 bg-gray-500 rounded-md p-2 text-white">
          <span className="text-xs whitespace-nowrap">画笔大小:</span>
          <input
            type="range"
            min="1"
            max="50"
            value={brushSize}
            onChange={handleBrushSizeChange}
            className="w-full h-1.5 bg-gray-400 rounded-lg appearance-none cursor-pointer"
            aria-label="Brush size"
          />
          <span className="text-xs min-w-[24px] text-center">{brushSize}</span>
        </div>
      )}

      {/* Zoom controls */}
      <div className="flex items-center gap-2 bg-gray-500 rounded-md p-2 text-white w-fit">
        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={decreaseZoom}
          aria-label="Zoom out"
        >
          <Minus className="h-4 w-4" />
        </button>

        <span className="text-sm font-medium min-w-[40px] text-center">{zoom}%</span>

        <button
          className="flex items-center justify-center h-6 w-6 rounded-sm hover:bg-gray-400 focus:outline-none"
          onClick={increaseZoom}
          aria-label="Zoom in"
        >
          <Plus className="h-4 w-4" />
        </button>
      </div>
    </div>
  )
}

